<template>
    <div class="test">
        <img src="../../assets/invabg.png" class="invabg" alt="">
        <div class="inva-form">
            <div class="form-item" :class="{hasvalue:list.dayType}">
                <div>
                    <p>选择币种</p>
                    <p  class="active">{{list.dayType}}</p>
                </div>
                <img src="../../assets/xdown.png" alt="" @click="handClickDate">
            </div>
            <div class="form-item form-item1" :class="{hasvalue:quantity}">
                 <div v-if="quantity">
                    <p>理财币数</p>
                </div>
                <input :class="{active:quantity}" v-model="quantity" type="number" placeholder="理财币数">
            </div>
            <div class="form-item " :class="{hasvalue:list.zq}">
                 <div >
                    <p>锁定周期</p>
                    <p class="active">{{list.zq}}</p>
                </div>
                <img src="../../assets/xdown.png" alt="" @click="handClickZq" >
            </div>
            <div class="form-item " :class="{hasvalue:sy}">
                <div>
                    <p>预期收益</p>
                    <p class="active">{{sy}}</p>
                </div>
                <div class="jisuan" :class="{jisuan1:sy}" @click="jisuan">计算</div>
            </div>
        </div>
        <mt-popup
                v-model="popupVisible"
                :closeOnClickModal="closeStatus"
                >
                <div class="m_fade">
                <div class="mf_h">选择充币类型</div>
                    <ul>
                        <li v-for="(item,index) in dataList" :key="index" @click="handLi(item)">{{item}}</li>
                    </ul>
                </div>
        </mt-popup>
        <mt-popup
                v-model="popupVisible1"
                :closeOnClickModal="closeStatus"
                >
                <div class="m_fade">
                <div class="mf_h">选择周期</div>
                    <ul>
                        <li v-for="(item,index) in zlist" :key="index" @click="handLiz(item)">{{item}}</li>
                    </ul>
                </div>
        </mt-popup>
    </div>
</template>

<script>
import {  Popup, Toast } from "mint-ui";
export default {
    data(){
        return{
            quantity:"",
            list:{
                dayType:"",  //币种
                profit:30,  //率利
                zq:""
            },
            popupVisible:false,
            popupVisible1:false,
            closeStatus:false,
            dataList:['BTC','ETH','EOS','USDT'],
            zlist:[30,60,90],
            sy:"",
            ll:[12,15,18],  //利率
            liList:[]
        }
    },
    methods:{
        jisuan(){
            this.sy = this.getyMoney();
        },
        //显示币种
        handClickDate(){
            this.popupVisible = true;
        },
        //显示周期
        handClickZq(){
            this.popupVisible1 = true;
        },
        //点击币种
        handLi(item){
            this.list.dayType = item;
            this.popupVisible = false;
        },
        //点击周期
        handLiz(item,index){
            this.list.zq = item;
            this.list.profit = this.ll[this.zlist.indexOf(item)];
            this.popupVisible1 = false;
        },
        //获取收益率
        getyMoney() {
            let res = "";
            this.liList.forEach((item) => {
                if(item.coinType == this.list.dayType && item.day == this.list.zq){
                    this.list.profit = item.profit;
                }
            })
            let value = this.quantity * this.list.profit / 100 * (this.list.zq / 365);
            value = value.toString();
            if (value) {
                let str = value.toString().slice(value.toString().indexOf(".") + 1);
                // console.log(value.substring(0,value.indexOf('.')+1))
                if (str.length > 8) {
                //小数大于8 个返回8个
                str = str.substring(0, 8);
                res = value.substring(0, value.indexOf(".") + 1) + str;
                } else {
                res = value.substring(0, value.indexOf(".") + 1) + str;
                }
            }
            return res || 0;
        },
        //初始化币种
        initType(){
            this.$ajaxGet("cycleProfitList",{}).then(res => {
               this.liList = res.data;
            });
        }
    },
    mounted(){

    },
    created(){
        this.initType();
    }
}
</script>

<style scoped>
.active{
    color: #353535 !important;
}
.test{
    width:100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.invabg{
    width: 100%;
    height: 276px;
}
.inva-form{
    position: absolute;
    top: 156px;
    width: 323px;
    height: 341px;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}
.form-item{
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
    /* transform: scaleY(0.5); */
    height: 31px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 29px;
    color: #888888;
}
.form-item input{
    font-size: 14px;
    outline: none;
    color: #888888;
}
.jisuan{
    width:59px;
    height:33px;
    font-size: 14px;
    background:rgba(247,169,92,1);
    border-radius:4px;
    color: #fff;
    text-align: center;
    line-height: 33px;
    margin-bottom: 6px;
}
.jisuan1{
    margin-bottom: -4px;
}
.form-item  img{
        width: 16px;
}
.mint-popup {
    border-radius: 4px;
    overflow: hidden;
}

.m_fade li {
    text-align: center;
    width: 280px;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
    font-weight: bold;
}
ul,
li {
    list-style: none;
}

.m_fade {
    /* width: 200px; */
    color: #888888;
    box-sizing: border-box;
}

.m_fade .mf_h {
    padding: 0 20px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-bottom: 1px solid #ececec;
    text-align: center;
    color: #353535;
}
.hasvalue{
  height: 50px;
    align-items: flex-end;
    padding-bottom: 8px;
    padding-top: 12px;
}
.hasvalue div:first-child{
    display: flex;
    flex-flow: column;
    justify-content:space-between;
    height: 50px;
} 
.hasvalue div p{
    line-height: 1;
    font-size: 14px;
}
.form-item1{
    flex-flow: column;
    align-items: flex-start !important;
}
</style>
